<template>
  <div class="word-extra-container" @mouseenter="showExtra" @mouseleave="hideExtra">
    <span class="main-word">{{ word }}</span>
    <div v-if="isVisible" class="extra-box" :style="{ width: boxWidth }">
      <slot>{{ extraContent }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WordExtra',
  props: {
    word: {
      type: String,
      required: true
    },
    extraContent: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '200px' // 默认宽度为200px
    }
  },
  data() {
    return {
      isVisible: false // 控制对话框显示与隐藏
    }
  },
  computed: {
    // 动态计算额外框的宽度
    boxWidth() {
      return this.width
    }
  },
  methods: {
    showExtra() {
      this.isVisible = true
    },
    hideExtra() {
      this.isVisible = false
    }
  }
}
</script>

<style scoped>
.word-extra-container {
  position: relative;
  display: inline-block;
}

.main-word {
  color: #1e90ff;
  cursor: pointer;
  text-decoration: none;
}

.extra-box {
  position: absolute;
  top: -60px; /* 让对话框显示在文字上方 */
  left: 0;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  white-space: normal;
  word-wrap: break-word;
  font-size: 14px;
}

.main-word:hover {
  color: #1c86ee;
}

.extra-box::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  z-index: -1;
}
</style>
